<template>
  <div>
    <header>
      <van-nav-bar :fixed="true" title="我的订单" left-arrow @click-left="onClickLeft" />
    </header>
    <section>
      <van-tabs v-model="active">
        <van-tab title="全部">
          <div class="oderbox">
            <div class="item" v-for="(v,index) in oderlist" :key="v._id">
              <div class="head">
                <span>订单号: {{v.no}}</span>
                <p>{{alt[index]}}</p>
              </div>
              <div class="goods">
                <img src="https://img01.hua.com/uploadpic/newpic/1201003.jpg_80x87.jpg" alt />
                <div class="desc">礼品 麝月之美麝月之美麝月之美</div>
                <div class="pirce">合计：￥{{v.price}}</div>
              </div>
              <div class="pay">
                <van-button v-if="!status[index]" plain hairline color="#ff734c" type="primary" @click="toPayfor(v._id)">去支付</van-button>
                <van-button v-if="status[index]" plain hairline color="#ff734c" type="primary">去评价</van-button>
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="待付款">
          <div class="oderbox">
            <div class="item" v-for="(v,index) in waitPay" :key="v._id">
              <div class="head">
                <span>订单号: {{v.no}}</span>
                <p>{{alt[index]}}</p>
              </div>
              <div class="goods">
                <img src="https://img01.hua.com/uploadpic/newpic/1201003.jpg_80x87.jpg" alt />
                <div class="desc">礼品 麝月之美麝月之美麝月之美</div>
                <div class="pirce">合计：￥{{v.price}}</div>
              </div>
              <div class="pay">
                <van-button plain hairline color="#ff734c" type="primary" @click="toPayfor(v._id)">去支付</van-button>
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="今日配送"></van-tab>
        <van-tab title="待评价">
           <div class="oderbox">
            <div class="item" v-for="(v,index) in oderlist" :key="v._id"  v-if="status[index]">
              <div class="head">
                <span>订单号: {{v.no}}</span>
                <p>{{alt[index]}}</p>
              </div>
              <div class="goods">
                <img src="https://img01.hua.com/uploadpic/newpic/1201003.jpg_80x87.jpg" alt />
                <div class="desc">礼品 麝月之美麝月之美麝月之美</div>
                <div class="pirce">合计：￥{{v.price}}</div>
              </div>
              <div class="pay">
                <van-button plain hairline color="#ff734c" type="primary">去评价</van-button>
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </section>
  </div>
</template>

<script>
import Vue from "vue";
import * as api from "../../api/oder";
import * as api1 from "@/api/goods";
import { Tab, Tabs } from "vant";
Vue.use(Tab).use(Tabs);
export default {
  name: "Myoder",
  data() {
    return {
      active: 0,
      oderlist: [],
      status: [],
      alt: [],
      waitPay: [],
      oderId: [],
      oderDetailArr: []
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    toPayfor(_id){
        console.log(_id)
        this.$router.push('/payfor?_id='+_id)
    }
  },
  mounted() {
    api.getOderList({}).then(data => {
      let arr = [];
      this.oderlist = data.data.orders;
      console.log(this.oderlist)
      this.oderlist.forEach((v, i) => {
        if (v.isPayed == true) {
          this.alt[i] = "已支付";
        } else {
          this.alt[i] = "待支付";
          this.waitPay.push(v);
        }
        arr.push(v.isPayed);
        this.oderId.push(v._id);
      });
      this.oderId.forEach((v, i) => {
        api.getOderDetail(v).then(data => {
          this.oderDetailArr.push(data.data.details);
        });
      });
      
    this.status = arr; 
    });
  
  }
};
</script>

<style scoped>
p,
span,
li,
ul,
h1,
img,
a {
  margin: 0;
  padding: 0;
  color: #333;
}
body,
html {
  background-color: #f0f0f0;
  height: 100%;
  display: flex;
}
.van-nav-bar .van-icon {
  color: #333;
  font-size: 22px;
}
.van-tabs__line {
  height: 2px;
  background-color: #ff734c;
}
section {
  background-color: #f0f0f0;
  flex: 1;
  margin-top: 50px;
}
.oderbox {
  padding: 0 10px 20px;
}
.oderbox .item {
  background-color: #fff;
  margin-top: 10px;
  color: #666;
  border-radius: 10px;
}
.oderbox .head {
  padding: 0 15px;
  display: flex;
  height: 45px;
  justify-content: space-between;
  align-items: center;
}
.oderbox .head span {
  color: #999;
}
.goods {
  display: flex;
  align-items: center;
  background-color: #fcfcfc;
  padding: 8px 0;
}
.goods img {
  width: 60px;
  height: 60px;
  padding: 0 15px;
}
.goods .desc {
  font-size: 15px;
  width: 130px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 30px;
}
.pirce{
    font-size: 13px;
    height: 20px;
    width: 120px;
    padding-left: 20px;
}
.oderbox .item .pay {
  height: 45px;
}
.van-button {
  margin-top: 8px;
  height: 30px;
  line-height: 30px;
  width: 80px;
  margin-left: 258px;
}
.van-button__text {
  color: #ff734c;
}
</style>>
